<template>
  <div class="login">
    <div class="con">
      <h3>登录</h3>
      <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
      <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
      <div class="btn">
          <el-button type="primary" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import { errorAlert, successAlert } from '../../utils/alert'
import { getLogin } from '../../utils/request'
export default {
  data() {
    return {
      user:{
        username:'',
        password:''
      }
    }
  },
  methods:{ 
    ...mapActions({
      "requestUser":"userActions"
    }),
    login(){

      if(this.user.username !== '' && this.user.password !== '') {
        getLogin(this.user).then(res=>{
          successAlert(res.data.msg)
          this.requestUser(res.data.list)
          this.$router.push('/index')
        })
      }else{
        errorAlert('用户名和密码不能为空')
        return
      }
      //  if(this.user.username !== '' && this.user.password !== ''){
      //   // 发起登录请求
      //   getLogin(this.user).then(res=>{
      //     successAlert(res.data.msg)
      //     // 存储用户信息
      //     // this.requestUser(res.data.list)
      //     // this.$router.push('/')
      //   })
      // }else{
      //   errorAlert('用户名和密码不能为空')
      //   return
      // }
      
      // if( this.user.username !== '' && this.user.password !== ''){
      //    getLogin(this.user).then(res=>{
      //     successAlert(res.data.msg)
      //    })
      // }else{
      //   errorAlert('用户名和密码不能为空')
      //   return
      // }

      // localStorage信息存储
      // if( this.user.username !== '' && this.user.password !== '' ){
      //   getLogin(this.user).then(res=>{
      //     successAlert(res.data.msg)
      //     if(localStorage.getItem('user')){
      //       localStorage.removeItem('user')
      //     }
      //     localStorage.setItem('user',JSON.stringify(res.data.list))
      //     this.$router.push('/')
      //   })
       
      // }
      //  else{
      //     errorAlert('用户名和密码不能为空')
      //     return
      //   }
      // 路由连接跳转
      // this.$router.push('/index')
    },
   
  },
}
</script>

<style scoped>
.login{
  width:100vw;
  height: 100vh;
  background: linear-gradient(#563444,#2F3D60);
  position:fixed;
  top:0;
  left:0;
}
.con{
  width:600px;
  height: 400px;
  border-radius: 20px;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background: white;
}
h3{
  text-align: center;
  margin:22px;
  font-size: 25px;
}
.el-button,.el-input{
  width:90%;
  margin:30px;
}
</style>
